<template>
    <a-row :gutter="10">
        <a-col :md="leftColMd" :sm="24" style="margun-bottom: 20px">
            <a-card :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQueryLeft">
                        <a-row :gutter="24">
                            <a-col :md="12" :sm="8">
                                <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                                     <a-input placeholder="" v-model="queryParam.roleName"></a-input>
                                </a-form-item>
                            </a-col>
                             <a-col :md="12" :sm="24">
                                <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
                                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- 操作区域按钮 -->
                <div class="table-operator" style="margin: 5px 0 10px 2px">
                <a-button @click="handleAdd" type="primary" icon="plus">新建角色</a-button>
                <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                    <a-button type="primary" icon="import">导入</a-button>
                </a-upload>
                <a-button type="primary" icon="download" @click="handleExportXls('角色管理')">导出</a-button>
             </div>

              <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                <i class="anticon anticon-info-circle ant-alert-icon">
                </i> 已选择 <a><b>{{ selectedRowKeys1.length }}</b></a>项
                 <a style="margin-left: 24px" @click="onClearSelected1">清空</a>
             </div>

             <div style="margin-top: 15px">
                 <a-table style="height: 500px" 
                          ref="table" 
                          size="middle" 
                          bordered 
                          rowKey="id" 
                          :columns="columns1"
                          :dataSource="dataSource"
                          :pagination="ipagination1"
                          :loading="loading1"
                          :rowSelection="{selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1, type:'radio'}"
                           @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                    <a @click="handleOpen(record)">用户</a>
                    <a-divider type="vertical"/>
                    <a-dropdown>
                        <a class="ant-dropdown-link">
                            更多 <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                            <a @click="handlePerssion(record.id)">授权</a>
                            </a-menu-item>
                            <a-menu-item>
                            <a @click="handleEdit(record)">编辑</a>
                            </a-menu-item>
                            <a-menu-item>
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
                                <a>删除</a>
                            </a-popconfirm>
                            </a-menu-item>
                        </a-menu>
                     </a-dropdown>
              </span>
                 </a-table>
             </div>
             <role-form ref="modalForm" @ok="modalFormOk"></role-form>
            </a-card>
        </a-col>

        <!-- 右侧区域 -->
        <a-col :md="rightColMd" :sm="24" v-if="this.rightcolval == 1">
            <a-card :bordered="false">
                <div style="text-align: right">
                    <!-- 关闭右侧弹窗的icon -->
                    <a-icon type="close-circle" @click="hideUserList"></a-icon>
                </div>
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline">
                        <a-row :gutter="24">
                            <a-col :md="12" :sm="12">
                                <a-form-item label="用户账号">
                                    <a-input placeholder="" v-model="queryParam2.username"></a-input>
                                </a-form-item>
                            </a-col>
                            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-col :md="9" :sm="24">
                                <a-button type="primary" @click="searchQuery2" icon="search" style="margin-left: 21px">查询</a-button>
                                <a-button type="primary" @click="searchReset2" icon="reload" style="margin-left: 8px">重置</a-button>
                            </a-col>
                            </span>
                        </a-row>
                    </a-form>
                </div>
                <!-- 操作按钮区域 -->
                <div class="table-operator" :md="24" :sm="24">
                    <a-button @click="handleAdd2" type="primary" icon="plus" style="margin-top: 16px">新增用户</a-button>
                    <a-button @click="handleAddUserRole" type="primary" icon="plus" style="margin-top: 16px">已有用户</a-button>
                    <a-dropdown v-if="selectedRowKeys2.length > 0">
                        <a-menu slot="overlay">
                            <a-menu-item key="1" @click="batchDel2">
                                <a-icon type="delete"/>
                                删除
                            </a-menu-item>
                        </a-menu>   
                         <a-button style="margin-left: 8px"> 批量操作
                            <a-icon type="down"/>
                          </a-button>
                    </a-dropdown>
                </div>
                <!-- table区域 -->
                <div>
                     <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;margin-top:10px">
                        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                        selectedRowKeys2.length }}</a>项
                        <a style="margin-left: 24px" @click="onClearSelected2">清空</a>
                    </div>
                    <a-table 
                        style="height: 500px" 
                        ref="table2" bordered 
                        size="middle"
                        rowKey="id"
                        :columns="columns2"
                        :dataSource="dataSource2"
                        :pagination="pagination2"
                        :loading="loading2"
                        :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
                         @change="handleTableChange2"
                    >
                        <span slot="action" slot-scope="text,record">
                            <a @click="handleEdit2(record)">编辑</a>
                            <a-divider type="vertical"/>
                            <a-dropdown>
                                <a class="ant-dropdown-link">更多
                                    <a-icon type="down"/>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item>
                                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete2(record.id)">
                                        <a>删除</a>
                                        </a-popconfirm>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </span>
                    </a-table>
                </div>
                <!-- 表单区域 -->
                <user-form ref="modalForm2"></user-form>
                <!-- 添加已有用户 -->
                <Select-User-Form ref="selectUserForm"></Select-User-Form>
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {getRoleList,getRoleUserList} from '@/mock'
import moment from 'moment'
import RoleForm from '../common/RoleForm.vue'
import UserForm from './form/UserForm.vue'
import SelectUserForm from '../common/SelectUserForm.vue'
export default {
    name: 'RoleUserList',
    mixins: [JeecgListMixin],
    components: {
        RoleForm,
        UserForm,
        SelectUserForm
    },
    data() {
        return {
            // 定义表格选中的数据的keys
            selectedRowKeys1: [],
            // 定义左侧表格选中的数据的数组
             selectionRows1: [],
            //  定义表格1的对象
             model1: {},
            //  当前选中的角色id
             currentRoleId: '',
            // 选择用户
            selectedRowKeys2: [],
            queryParam: {},
            dataSource: [],
            columns1: [
                {
                title: '角色编码',
                align: 'center',
                dataIndex: 'roleCode'
                },
                {
                title: '角色名称',
                align: 'center',
                dataIndex: 'roleName'
                },
                {
                title: '创建时间',
                dataIndex: 'createTime',
                align:"center",
                sorter: true,
                customRender: (text) => {
                    return moment(text).format('YYYY-MM-DD')
                }
                },
                {
                title: '操作',
                dataIndex: 'action',
                align: 'center',
                scopedSlots: { customRender: 'action' }
                }
            ],
            // 表格2数据数组
            dataSource2: [],
            columns2: [
            {
                title: '用户账号',
                align: 'center',
                dataIndex: 'username',
                width: 120
            },
            {
                title: '用户名称',
                align: 'center',
                width: 100,
                dataIndex: 'realname'
            },
            {
                title: '状态',
                align: 'center',
                width: 80,
                dataIndex: 'status_dictText'
            },
            {
                title: '操作',
                dataIndex: 'action',
                scopedSlots: { customRender: 'action' },
                align: 'center',
                width: 120
            }
            ],
          ipagination1: {
              current: 1,
              pageSize: 10,
              pageSizeOptions: ['10', '20', '30'],
              showTotal: (total, range) => {
                return range[0]  + '-' + range[1] + ' 共' + total + '条'
             },
            showQuickJumper: true,
            showSizeChanger: true,
            total: 0
          },
         pagination2: {
            current: 1,
            pageSize: 10,
            pageSizeOptions: ['10', '20', '30'],
            showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
            },
            showQuickJumper: true,
            showSizeChanger: true,
            total: 0
          },
          loading1: false,
          loading2: false,
          // 控制右侧的宽度是否显示
          rightcolval: 0,
        //   右侧查询参数对象
          queryParam2: {},
        }
    },
    computed: {
         importExcelUrl: function() {
            //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
            return null;
        },
        leftColMd() {
            // flex布局的宽度和是否选中表格数据有关系 如果没有选中表格数据则宽度100% 有选中数据宽度为50%
            return this.selectedRowKeys1.length === 0 ? 24:12;
        },
        // 右侧布局计算宽度
        rightColMd() {
            return this.selectedRowKeys1.length === 0 ? 0: 12;
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        getAction() {
            return new Promise(resolve=>{
                  getRoleList().then(res=>{
                    if(res.success) {
                      resolve( res.result);
                    }
                })
            })
        },
        onClearSelected1() {},
        searchQuery() {},
        searchReset() {},
        handleExportXls() {},
        handleImportExcel() {},
        searchQuery2() {},
        // 左侧表格的选中变化可控制右侧表格的变化
        onSelectChange1(selectedRowKeys, selectionRows) {
            this.rightcolval = 1;
            this.selectedRowKeys1 = selectedRowKeys;
            this.selectionRows1 = selectionRows;
            // 拷贝选中的表格对象
            this.model1 = Object.assign({},selectionRows[0]);
            this.currentRoleId = selectedRowKeys[0];
            // 加载右侧的数据
            this.loadData2();
        },
        // 右侧表格的change事件
        onSelectChange2() {},
        handleTableChange2() {},
        handleEdit2() {},
        onClearSelected2() {},
        handleDelete2() {},
        searchReset2() {},
        // 加载右侧表格的数据
        loadData2() {
            // TODO 写死的数据 
            getRoleUserList().then(res=> {
                this.dataSource2 = res.result.records
            })
        },

        // 关闭右侧 控制selectRowKeys = []
        hideUserList() {
             this.selectedRowKeys1 = []
        },
        // 新增用户
        handleAdd2() {
            if(this.currentRoleId == '') {
                this.$mnessagge.error('请选择一个角色');
            }else {
                this.$refs.modalForm2.roleDisabled = true;
                this.$refs.modalForm2.title = '新增';
                this.$refs.modalForm2.edit({activitiSync:'1',userIdentity:1,selectedroles:this.currentRoleId});
            }
        },
        // 根据屏幕自适应宽度 自适应设置抽屉尺寸
        resetScreenSize() {
            let screenWidth = document.body.clientWidth;
            if(screenWidth < 500) {
                this.draw
            }
        },
        // 新增已有的用户
        handleAddUserRole() {
            // TODO 已有用户弹窗报错 待解决
            if ( this.$refs.selectUserForm) {
            this.$nextTick(() => {
                this.$refs.selectUserForm.visible = true
            });
         }
        }

    }
}
</script>
<style lang="less" scoped>
  .ant-btn {
    margin-left: 8px
  }
</style>